<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="contextPath" value="${pageContext.request.contextPath}" />

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="user-scalable=yes, initial-scale=1.0, maximum-scale=2.2, minimum-scale=1.0, width=device-width" />
	<title>JTOON</title> 
	<link href="${contextPath}/css/common/w_20120429200330.css" type="text/css" rel="stylesheet">
	<link href="${contextPath}/css/common/e_20120429200330.css" type="text/css" rel="stylesheet">
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$('#fx_img').error(function() {
				$(this).attr('src', '${contextPath}/img/end.jpg');
			});
			
			$('img.fx2').click(function() {
				$(this).toggleClass("wide");
			}); 
		});
	</script>  
	<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-31745784-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</head>
<body>
	<div class="u_ts">
		<a href="${contextPath}/index">
			<img width="58" height="33" alt="JTOON" src="img/jtoon.jpg">
		</a>
		<a href="${contextPath}/index">
			<img width="39" height="33" alt="웹툰" src="http://static.naver.com/m/comic/im/lg_comic.png">
		</a> 
	</div>    
	<div id="ct">
		<div class="chh">
			<h1>${episode.title}</h1>
			<div class="pl"><a class="bt5" href="${contextPath}/index"><span class="pv">웹툰 홈</span></a></div>
			<div class="pr"><a class="bt5" href="${contextPath}/bookmark?cid=${cid}&eid=${episode.eid.id}&eOrder=${episode.order}&imgNum=${imgNum}&mode=add">책갈피 등록</a></div>
		</div>
		<div class="im_c">
			<c:choose>
				<c:when test="${img.order > 1000}">
					<img class="fx2" alt="" src="${img.src}">
				</c:when>  
				<c:otherwise> 
					<img id="fx_img" class="fx2" src="http://61.84.80.145:1042/${comicsFolder}/${episode.order}/${episode.order} (${imgNum * 5 - 4}).jpg" />
					<img id="fx_img" class="fx2" src="http://61.84.80.145:1042/${comicsFolder}/${episode.order}/${episode.order} (${imgNum * 5 - 3}).jpg" />
					<img id="fx_img" class="fx2" src="http://61.84.80.145:1042/${comicsFolder}/${episode.order}/${episode.order} (${imgNum * 5 - 2}).jpg" />
					<img id="fx_img" class="fx2" src="http://61.84.80.145:1042/${comicsFolder}/${episode.order}/${episode.order} (${imgNum * 5 - 1}).jpg" />
					<img id="fx_img" class="fx2" src="http://61.84.80.145:1042/${comicsFolder}/${episode.order}/${episode.order} (${imgNum * 5}).jpg" />
				</c:otherwise>
			</c:choose>
		</div>
		<div class="cmt">
			<div class="fbtn"></div>
		</div>
		<div class="u_pg2">
			<c:if test="${1 < imgNum}">
				<a id="nextButton" class="u_pg2_btn" href="${contextPath}/view?cid=${cid}&eid=${episode.eid.id}&eOrder=${episode.order}&imgNum=${imgNum - 1}">
					<span class="u_pg2_next">이전</span> 
				</a> 
			</c:if>
			<a id="nextButton" class="u_pg2_btn" href="${contextPath}/view?cid=${cid}&eid=${episode.eid.id}&eOrder=${episode.order}&imgNum=${imgNum + 1}">
				<span class="u_pg2_next">다음</span>
			</a>
		</div>
		<div class="cmt">
			<div class="fbtn"></div> 
		</div>
		<div class="sc6">
			<p class="bt7">
				<c:if test="${firstEpisode.order != episode.order}">
					<a class="w33 f" href="${contextPath}/view?cid=${cid}&eid=${prevEpisode.eid.id}&eOrder=${prevEpisode.order}"><span class="pv">이전화</span></a> 
				</c:if>
				<c:if test="${episode.order != lastEpisode.order}">
					<a class="w33" href="${contextPath}/view?cid=${cid}&eid=${nextEpisode.eid.id}&eOrder=${nextEpisode.order}"><span class="nx">다음화</span></a>	
				</c:if>
								
				<a class="w33" href="${contextPath}/episode?cid=${cid}">목록</a> 
			</p>
		</div>
		
	</div>
	<div class="u_ft">

		<div class="u_ftlkw" id="u_ftlkw">
			<c:choose>
				<c:when test="${isLogin}">
					<a class="u_ftlk2" href="${contextPath}/logout">로그아웃</a>
					<a class="u_ftlk2" href="${contextPath}/bookmark">책갈피</a>
				</c:when>
				<c:otherwise>
					<a class="u_ftlk2" href="${contextPath}/login">로그인</a>
					<a class="u_ftlk2" href="${contextPath}/join">회원가입</a>
					<a class="u_ftlk2" href="${contextPath}/bookmark">책갈피</a>
				</c:otherwise>
			</c:choose>
		</div>

	</div>

	<address class="u_cr">
		<span class="u_cri">&copy; <a class="u_cra u_cra_v1" href="#">JTOON Corp.</a></span>  
	</address>

</body> 
</html>